<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <!-- 文章列表 -->
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id"
          :artObj="obj"
          @dislike="dislikeFn"
          @reports="reportsFn"
        ></ArticleItem></van-list
    ></van-pull-refresh>
  </div>
</template>

<script>
import {
  articleDislikeAPI,
  articleReportsAPI,
  getAllArticleListAPI
} from '@/api'
import ArticleItem from '@/components/articleItem.vue'
import Notify from '@/ui/Notify'
export default {
  props: {
    // list: Array // 文章列表数据
    channelId: Number // 频道 id
  },
  components: {
    ArticleItem
  },
  created () {
    this.getAllArticleListFn()
  },
  data () {
    return {
      list: [], // 文章列表数据
      loading: false, // 底部加载状态
      finished: false, // 数据是否全部加载完成
      theTime: new Date().getTime(), // 用于分页
      isLoading: false // 刷新状态
    }
  },
  methods: {
    // 获取文章列表数据
    async getAllArticleListFn () {
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime
      })
      this.list = [...this.list, ...res.data.results]
      this.theTime = res.data.pre_timestamp
      // 本次请求的是最后的数据，没有更多了
      if (this.theTime === null) this.finished = true
      this.loading = false // 如果不关，下次触底不会触发 onLoad
    },
    // 底部 - 更新数据事件的方法
    onLoad () {
      if (this.list.length === 0) return (this.loading = false)
      this.getAllArticleListFn()
    },
    // 顶部 - 刷新数据事件的方法
    onRefresh () {
      this.list = []
      this.tieTime = new Date().getTime()

      this.getAllArticleListFn()
    },
    // 文章 - 点击不感兴趣的方法
    async dislikeFn (artObj) {
      await articleDislikeAPI(artObj.art_id)
      Notify({ type: 'success', message: '反馈成功' })
    },
    // 文章 - 点击举报的方法
    async reportsFn (id, value) {
      await articleReportsAPI({
        target: id,
        type: value,
        remark: '其他'
      })
      Notify({ type: 'success', message: '举报成功' })
    }
  }
}
</script>
